<template>
  <div id="index">
      <div class="side-nav">
        <div class="nav-items-title">学科分类</div>
        <ul class="nav-items">
          <li class="nav-item"
              @mouseenter="itemShow"
              @mouseleave = "itemHidden"
              data-index = "1"
          >
              <span
                class="item-topic"
              >理学</span>
            <div class="topic-detail" v-show="itemHover.currItem == 1">
              <span>高等数学</span>
              <span>原子与分子物理</span>
              <span>几何数学</span>
              <span>光学</span>
              <span>物理化学</span>
              <span>天体力学</span>
              <span>理论物理</span>
              <span>物理化学</span>
              <span>天体力学</span>
              <span>理论物理</span>
            </div>
          </li>
          <li class="nav-item"
              @mouseenter="itemShow"
              @mouseleave = "itemHidden"
              data-index = "2"
          >
              <span class="item-topic"
              >理学</span>
            <div class="topic-detail" v-show="itemHover.currItem==2">
              <span>高等数学</span>
              <span>原子与分子物理</span>
              <span>几何数学</span>
              <span>光学</span>
              <span>物理化学</span>
              <span>天体力学</span>
              <span>理论物理</span>
            </div>
          </li>
          <li class="nav-item"
              @mouseenter="itemShow"
              @mouseleave = "itemHidden"
              data-index = "3"
          >
              <span class="item-topic"
              >理学</span>
            <div class="topic-detail" v-show="itemHover.currItem==3">
              <span>高等数学</span>
              <span>原子与分子物理</span>
              <span>几何数学</span>
              <span>光学</span>
              <span>物理化学</span>
              <span>天体力学</span>
              <span>理论物理</span>
            </div>
          </li>
        </ul>
      </div>
      <router-view
        name="content"
        class="content-wrap"
      ></router-view>
  </div>
</template>

<script>
  export default {
    name: 'index',
    data () {
      return {
        // 当鼠标hover是得到对应的index值，显示相应的detail
        itemHover : {
          currItem : ''
        },
      }
    },
    methods : {
      itemShow : function (event) {
        this.itemHover.currItem = event.target.dataset.index;
      },
      itemHidden : function () {
        this.itemHover.currItem = '';
      },
      // 该函数传入topNav中根据不同的按钮获取login 或者 register
      toggle : function (value) {
        // 用于显示登陆与注册页面
        this.loginTog.tem = 'loginRegister';
        // 用于 在登陆页面显示具体的login或者register
        this.loginTog.loginTem = value
      }
    }
  }
</script>

<style scoped>
  /*sideNav开始*/
  .side-nav {
    position: fixed;
    float:left;
    background-color: white;
    width: 250px;
    font: 14px "Microsoft YaHei",sans-serif;
    color: #71777c;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-align: center;
    padding-bottom: 20px;
    z-index: 99;
  }

  .side-nav .nav-items-title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    border-bottom: 1px solid rgba(178,186,194,.15);
  }
  .nav-item {
    position: relative;
  }
  .nav-item .item-topic {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #006cd9;
  }

  .nav-item:hover {
    width: 100%;
    background-color: #f4f5f5;
    cursor: pointer;
  }


  .nav-items .nav-item .topic-detail {
    width: 260px;
    position: absolute;
    right: -260px;
    top: 0;
    background-color: #f4f5f5;
    text-align: left;
    padding: 20px;
    box-sizing: border-box;
    height: fit-content;
    z-index: 99;
  }
  .topic-detail {
    position: relative;
  }
  .topic-detail span {
    text-align: left;
    display: inline-block;
    min-width: 70px;
    color: #0055ab;
    height: 30px;
    left: 130px;
  }

  .topic-detail span:hover {
    color: blue;
  }

  /*sideNav结束*/
  .content-wrap {
    float: right;
    width: calc(100% - 270px);
  }
</style>
